<template>
  <!-- 考勤评价 -->
  <div class="attenceAppraiseEle">
    <div class="box-header">
      <span class="title">{{attenceAppraiseEle.type===1?'家长评价':'老师评价'}}
        {{attenceAppraiseEle.reply?'回复':''}}</span>
      <span v-if="attenceAppraiseEle.evaluate" class="time">{{attenceAppraiseEle.createTime}}</span>
      <span v-if="attenceAppraiseEle.evaluate" class="studentName">{{attenceAppraiseEle.userName}}</span>
      <span v-else class="noappraise">未评价</span>
    </div>
    <div class="box-txt">{{attenceAppraiseEle.evaluate}}</div>
    <div class="box-images">
      <div v-for="(row,index) in attenceAppraiseEle.pictureList" :key="index" >
        <video class="appraiseImages" v-if="isVideoUrl(row.url)" :src="row.url" controls="controls" autoplay>
          您的浏览器不支持 视频 标签。
        </video>
        <img v-else class="appraiseImages" :src="row.url" />
      </div>
      
    </div>
  </div>
</template>

<script>

export default {
  components:{},
  props:['attenceAppraiseEle'],
  data() {
    return {
      
    };
  },
  methods: {
    init(){

    },
    /**判断是否为视频链接
     * @param url 链接
     * @return true/false
     */
    isVideoUrl(url){
      // let index=url.lastIndexOf('.');
      // let type=url.substr(index);
      // if(type=='mp4'||type=='ogg'||type=='webm'){
      //   return 
      // }
      let result= /^http?.+\.(swf|avi|flv|mpg|rm|mov|wav|asf|3gp|mkv|rmvb|mp4|ogg|webm)$/.test(url);
      return result;
    }
  },
  mounted() {
	  this.init();
  },
  computed: {},
  watch: {},
  // created: function() {
  //   this.formateData(this.formdata.siteModelFileds);
  // }
};
</script>

<style lang="scss">
.attenceAppraiseEle {
  width: 100%;
  font-size: 0.16rem;
  margin-top: 0.16rem;
  .box-header{
    width: 100%;
    height: 0.4rem;
    padding: 0 0.1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f5f7fa;
    border-radius: 0.05rem;
    .title{
      width: 50%;
    }
    .time{
      width: 50%;
      text-align: center;
    }
    .studentName{
      width: 50%;
      text-align: right;
    }
    .noappraise{
      width: 50%;
    }
  }
  .box-txt{
    width: 100%;
    padding: 0.16rem 0.2rem;
  }
  .box-images{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    padding: 0 0.1rem;
    .appraiseImages{
      margin-left: 0.12rem;
      max-width: 2.2rem;
      max-height: 3rem;
      margin-bottom: 0.1rem;
    }
  }
}
</style>